/* popup table css */
/* was: td {  */
.popuprow, #lptabpopup tr, #lptabpopupformfills tr, #lptabpopupmore tr, #lptabpopupmore html\:tr { 
  font-size:14px; 
  font-family: Arial, Helvetica sans-serif; font-weight:normal;   /* nolonger bold */
  z-index:10000;
  overflow:auto;
  /* doesn't seem to work ?
  overflow:hidden;
  text-overflow:ellipsis;
  */
  margin:1px;
  padding:0;
}

.popuprow td, #lptabpopup td, #lptabpopupformfills td, #lptabpopupmore td {
  border: 1px solid transparent;
}

.tablerowfirefox {
  line-height:20px;  /* override default firefox css */
}
.tablecellfirefox {
  display:block; 
}


/* was td:hover {  */
/* original, based on combobox.css:
** #lptabpopup tr:hover, #lptabpopup html\:tr:hover, #lptabpopupformfills tr:hover, #lptabpopupformfills html\:tr:hover, #lptabpopupnever tr:hover, #lptabpopupnever html\:tr:hover, #lptabpopupmore tr:hover, #lptabpopupmore html\:tr:hover { 
** background: #0399d4 !important;
**         background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important;
**         color: #fff !important;
**         -webkit-border-radius: 0;
**         -moz-border-radius: 0;
**         text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
** }
*/
/* implement the new, aseptic 29thdrive hover */ 
#lptabpopup tr:hover, #lptabpopup html\:tr:hover, #lptabpopupformfills tr:hover, #lptabpopupformfills html\:tr:hover, #lptabpopupmore tr:hover, #lptabpopupmore html\:tr:hover { 
background: #fff !important;
        color: #000 !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        border: 1px solid #d6d6d6;
}
/* turns out, you have to set outline on the td, not the tr */
#lptabpopup td:hover, #lptabpopup html\:td:hover, #lptabpopupformfills td:hover, #lptabpopupformfills html\:td:hover, #lptabpopupmore td:hover, #lptabpopupmore html\:td:hover { 
        outline: 1px solid gray;
        outline-offset: 1px;
}

#lptabpopupmore{
  padding-left: 10px;
}


#lptabpopupnavbar td:hover, #lptabpopupnavbar html\:td:hover {
  background: #d32d27 !important;
  opacity: .8;
}

#lptabpopupnavbar td, #lptabpopupnavbar html\:td {
  opacity: .6;
}
#lptabpopupnavbar td.selected, #lptabpopupnavbar html\:td.selected {
  background: #d32d27 !important;
  opacity: 1;
}


#lptabpopup,#lptabpopupformfills, #lptabpopupmore{
  width:100%;
}



table, html\:table {
 padding:0px;
 margin-left:2px; margin-top:2px;
 margin-right:2px;
}

/* body */
  /*  border:thin dotted; */
  /* background: #919191 !important; /* for non-css3 browsers */
  /* background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
  /* color: #e7e5e5; */
/*
body #main { margin:1px; 
  background: #fff !important;
  font-weight: bold;
  color: #000 !important;
  cursor:default;
  text-align:left;
  font-size:14px;

  overflow:hidden;
  border-color: #000 !important;
  border-style: solid !important;
  border-width: 2px; 
}
*/
/* next rule for a:link, a:visited is required for overlap with IE-internal stylesheet.  I hate this. */
a:link.tooltipsuper, a:visited.tooltipsuper, a:link.tooltipsuperlong, a:visited.tooltipsuperlong, a:focus.tooltipsuper, a:focus.tooltipsuperlong {
  color: transparent;
  text-decoration:none;
  background: #ffffff !important;  /* 3.0 elements in title bar with white background */
}
a:link.tooltip40super, a:visited.tooltip40super, a:link.tooltip40superlong, a:visited.tooltip40superlong, a:focus.tooltip40super, a:focus.tooltip40superlong {
  color: transparent;
  text-decoration:none;
  background: #d32d27 !important;  /* 4.0 elements in title bar with red background */
}
/* also needed this for IE */
a:link.tooltipgen1, a:visited.tooltipgen1, a:link.tooltipgen2, a:visited.tooltipgen2, a:link.tooltipshowpassword, a:visited.tooltipshowpassword, a:link.tooltipgen3 a:visited.tooltipgen3 {
  color: transparent;
  text-decoration:none;
  background: #e6e6e6 !important; /* elements inside tabs with grey background */    /* final */
  vertical-align:middle;
}

/* input type=image vs img vs image */
a:link.tooltip40showpassword, a:visited.tooltip40showpassword {
  color: transparent;
  text-decoration:none;
  background: transparent;
  vertical-align:middle;
}

/* need this for IE as well. gaaak */
label[for="u"], label[for="p"], label[for="name"], label[for="group"] {
  color: #000
}
/* for 4.0 */
a:link.tooltipgen1_40, a:visited.tooltipgen1_40, a:link.tooltipgen2_40, a:visited.tooltipgen2_40, a:link.tooltipgen3_40 a:visited.tooltipgen3_40 {
  color: transparent;
  text-decoration:none;
  background: #f2f4f5 !important; /* elements inside tabs with grey background */    /* final */
  vertical-align:middle;
}

a {
  color: #e7e5e5;
  text-decoration:none;
}
a:focus { 
background: #0399d4 !important; /* for non-css3 browsers */
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
        color: #fff !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.tablerow_firstaction {
border-top: solid 2px black;
}

.tablerow_sep {
  height:4px; 
  line-height:4px;
  border-top: solid 2px black;
  display:table-row;
}

#askMsgDiv {
  margin:5px;  /* this seems right */
}
.divtext { font-size:14px; 
  font-family: Arial, Helvetica, sans-serif; font-weight:normal;  /* bold looks like shouting */
  z-index:10000;
  overflow:auto;
  margin-left:5px;
  margin-right:1px;
  margin-top:1px;
  margin-bottom:1px;
  padding:0;
}
.divtext:hover {
/* keep in sync with 29th drive hover style
** .divtext:hover {
**      background: #0399d4 !important; 
**      background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; 
**      color: #fff !important;
**      -webkit-border-radius: 0;
**      -moz-border-radius: 0;
**      text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
*/
        background: #fff !important;
        color: #000 !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .1);  /* may be un-necessary */
        border: 1px solid #d6d6d6;
        outline: 1px solid gray;
        /* outline-offset: 1px;*/
}

.underline {
  text-decoration:underline;  /* seems more useful to users, enable by setting g_underline_text_action */
}
.savegendiv {   /* extend divtext class */
  vertical-align:top;
  margin-left: 0px;
}

/* copied from lp_toolstrip.css to retain look/feel ?*/
/* #generate {text-align:center;padding:0 20px;color:#123272;} */


#popupcontainer, #popupcontainerff {
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
}

/* use key events to replicate hover */
/* original styling based on combobox.css
**.showfocus {
**        background: #0399d4 !important;
**        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important;
**        color: #fff !important;
**        -webkit-border-radius: 0;
**        -moz-border-radius: 0;
**        text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
**}
*/
.showfocus {
        background: #fff !important;
        color: #000 !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        outline: 1px solid gray;
        outline-offset: 1px;
}

#exttable {
  font-size:11px;  /* might be too small, but hard to squeeze everything in */
}
#exttable td, #exttable html\:td { font-size:11px; 
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  z-index:10000;
  overflow: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin:1px;
  padding:0;
}
.popcell {
  vertical-align:top;
  padding-top:2px;
  display:inline;
}
/* color reused from tooltip.  can't think of anything better
** .highlight {  
**   background: #9FDAEE !important;
**   vertical-align:top;
**   color: #000 !important;
** }
*/
/* 29th drive mockup underlines instead of highlight */
.highlight {  
  text-decoration:underline !important;
  vertical-align:top;
}

/************ next chunk of css rules are for tooltips  *************/
/*originally from:
** http://sixrevisions.com/css/css-only-tooltips/
*/
.tooltip {
        border-bottom: 1px dotted #000; color: #000 !important; outline: none;
        text-decoration: none;
        position: relative;
}

.tiplabel {
  color: #000 !important;
  text-decoration: none;
/* need this line due to conflict with IE internal stylesheet */
  font-weight:normal; font-size:12px;  /* same as for .gendivtext */
}
.tooltip span, .tooltip html\:span {
        margin-left: -999em;
        position: absolute;
        opacity:0;
        top: 1.4em;
        left: 0.5em;
        width:200px;
        text-decoration:none !important;
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        -moz-transition-property:opacity; -moz-transition-duration:1s; -webkit-transition-property:opacity; -webkit-transition-duration:1s; 
        z-index: 100;
}

.tooltipright {
        border-bottom: 1px dotted #000; color: #000 !important; outline: none;
        text-decoration: none;
        position: relative;
}
.tooltipright span, .tooltipright html\:span {
        margin-left: -999em;
        position: absolute;
        opacity:0;
        top: 1.4em;
        left: -10em;
        width:200px;
        text-decoration:none !important;
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        -moz-transition-property:opacity; -moz-transition-duration:1s; -webkit-transition-property:opacity; -webkit-transition-duration:1s; 
        z-index: 100;
}

/* this displays the triangle to latch onto tooltip box
.tooltip:hover span:before, .tooltip:hover html\:span:before {
  content:'';
  width:0px;
  height:0px;
  position:absolute;
  border-style: solid;
  border-color: #2BB0D7 transparent transparent transparent;
  border-width: 8px;
  left: 20px;
  bottom: 0px;
}
*/
.tooltip:hover span, .tooltip:hover html\:span {
        margin-left: 0;
        font-family: Arial, Helvetica, sans serif;
        font-weight: normal;
        font-size:12px; 
        opacity:1;
}
.tooltipright:hover span, .tooltipright:hover html\:span {
        margin-left: 0;
        font-family: Arial, Helvetica, sans serif;
        font-weight: normal;
        font-size:12px; 
        opacity:1;
}

.classic { padding: 0.4em 0.4em; }
/*.classic {background: #FFFFAA; border: 1px solid #FFAD33; color: #000 !important; }*/
.classic { background: #9FDAEE; border: 1px solid #2BB0D7; color: #000 !important; }

/* next class is for the SPAN container containing visual cue/arrow on site/formfill rows.  was originally 'expando' */
.expander {
  padding-left:2px; 
  padding-right:2px; 
  float:right;
}
/* can't figure out a good way to make this align vertically, otherwise */
/* these numbers are only good for arrow.png
.expander img {
  padding-top: 5px;  
  padding-bottom: 5px;
} */
.expander img {  /* for 16x16 */
  padding-top: 1px;  
}
#lptabpopuptitlespan{
  padding-left:10px;
}
.stdffopts{
  padding-left:10px;
}
/*input#special{ */
.specialnotadv{  /* assign to input#special only when g_special_is_advanced is true */
  margin-left:15px;
}
input#mindigits{
  margin-left:10px;
}
/* LPPopup is overall XUL container, for Firefox only */
#LPPopup{
  padding:0px;
  background-color:transparent;
  -moz-appearance: none;
}
.tooltiphelp {
        border-bottom: 1px ; color: #000 !important; outline: none;
        text-decoration: none;
        font-size:13px;
}
.tooltiphelp #tthelp  {
        margin-left: -999em;
        position: absolute;
        opacity:0;
        top: 2em;
        left: 2em;
        width:220px;   /* case: popup could be thinner than 220 pixels, and this will not be good */
        overflow:auto;
        text-decoration:none !important;
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        -moz-transition-property:opacity; -moz-transition-duration:1s; -webkit-transition-property:opacity; -webkit-transition-duration:1s; 
        z-index: 100;
}
.tooltiphelp:hover #tthelp {
        margin-left: 0;
        font-family: Arial, Helvetica, sans serif;
        font-weight: normal;
        font-size:12px; 
        overflow:auto;
        opacity:1;
}
.row{
  display: table-row;
  font-weight: normal;
}
.saveinput{
  width: 300px;
  height: 30px;
  background-color:#fff !important;
  color:#000 !important;
  padding-left: 5px;
/* 29th drive styling has squared off boxes...
  border-radius: 5px;
  -webkit-border-radius: 5px;
*/
  border-top-color:#a4a4a4;
  border-left-color:#c3c3c3;
  border-right-color:#c3c3c3;
  border-bottom-color:#c3c3c3;
}

/* styling for the savesite_popupaction_iframe tab */
#lptabpopupsave{
  padding:5px;
  background-color:#e6e6e6;  /* final */
  color:#000;
  /* height: 100%; */
}
#lptabpopupsave label{
  background-color:#e6e6e6;  /* final */
  color:#000;
  font-weight:bold;
  font-family: Arial, Helvetica, sans-serif; font-weight: bold;
  font-size:12px;
  margin:0px;
}
#lptabpopupsave p{
  font-family: Arial, Helvetica, sans-serif; font-weight:normal;
  font-size:12px;
  background-color:#e6e6e6;  /* final */
  color:#000;
  margin:0px;
  width:300px;  /* keep in sync with .saveinput width */
  padding: 5px 0px;
}
#lptabpopupsave span, #lptabpopupsave html\:span{
  display:block;
}


#lptabnavbarbtn { 
  background: #bbb;
  width:100%; position:absolute; left:0px; bottom:0px; margin: 0px; border-spacing: 0;
}
#lptabnavbarbtn:hover { 
  background: #aaa;
}
#lptabnavbarbtn div {
    margin:auto;
}

.shortenstr {  /* I hate CSS */
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  display:inline-block;
}
#lptabnavbarbtn span, #lptabnavbarbtn html\:span { 
  color:white;
  padding-left:10px;
}

#generatebutton{
  margin-left:3px;  /* next 4 rules to try docking the button to the
                    ** generate password input field, per Levi */
  vertical-align:top;
  height:34px;
  min-width:34px!important;
  width:34px!important;
  padding-top:5px!important;
  margin-top:0px;
  margin-bottom:0px;
}
#copypwbutton{
  margin-top:-1px;
  cursor:pointer;
  color:#d32d27;
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif; 
  font-weight:light;
  
}
.genselectdiv{
  padding-bottom:2px;
}

/* tooltips based against
** http://www.spiceupyourblog.com/2011/05/simple-css-only-tooltip-descriptions.html
*/
.tooltipsuper,
.tooltip40super
{
position: relative;
/*background: #eaeaea;*/
cursor: pointer;  /* was help */
display: inline-block;
text-decoration: none;
/*color: #222;*/
outline: none;
height:30px;  /* needed for firefox? */
}

.tooltipsuper span, .tooltipsuper html\:span
{
visibility: hidden;
position: absolute;
top: 35px;
left: 50%;
text-align: center;
z-index: 999;
width: 100px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif; font-weight:bold;
margin-left: -90px;
padding: 2px;
/*border: 1px solid #000;  this looks better when background-color gradient is set*/
/*opacity: .9; */
line-height:14px;
color:#fff;
background-color: #000;
/*
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
*/
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip40super span, .tooltip40super html\:span
{
  visibility: hidden;
  position: absolute;
  top: 42px;  /* 35px; */
  left: 50%;
  text-align: center;
  z-index: 999;
  width: 100px;
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  margin-left: -90px;
  padding: 2px;
  line-height:14px;
  color:#fff;
  background-color: #000;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltipsuper:hover,
.tooltip40super:hover
{
border: 0; /* IE6 fix */
}

.tooltipsuper:hover span, .tooltipsuper:hover html\:span,
.tooltip40super:hover span, .tooltip40super:hover html\:span
{
/*visibility: visible;*/
transition-delay:1s; visibility: visible;
}

.tooltipsuper span:before,
.tooltipsuper html\:span:after,
.tooltipsuper html\:span:before,
.tooltipsuper span:after,
.tooltip40super span:before,
.tooltip40super html\:span:after,
.tooltip40super html\:span:before,
.tooltip40super span:after
{
content: "";
position: absolute;
z-index: 1000;
top: -7px;
left: 87%;  /* change tooltipsuper span margin-left & width if you change this */
margin-left: -8px;
border-bottom: 8px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0;
}

.tooltipsuper span:before,
.tooltipsuper html\:span:before,
.tooltip40super span:before,
.tooltip40super html\:span:before
{
border-top-color: #000;
top: -7px;
}

/* take advantage of more space for the savesite div, which is needed
** because the string is longer
*/
.tooltipsuperlong,
.tooltip40superlong
{
position: relative;
/*background: #eaeaea;*/
/*cursor: help;*/
cursor: pointer;
display: inline-block;
text-decoration: none;
/*color: #222;*/
outline: none;
height:30px;  /* needed for firefox? */
}

.tooltipsuperlong span,
.tooltipsuperlong html\:span
{
visibility: hidden;
position: absolute;
top: 35px;
left: 50%;
text-align: center;
z-index: 999;
width: 150px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif; font-weight:bold;
margin-left: -14px;
padding: 2px;
/*border: 1px solid #000;  this looks better when background-color gradient is set*/
/*opacity: .9; */
line-height:14px;
color:#fff;
background-color: #000;
/*
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
*/
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip40superlong span,
.tooltip40superlong html\:span
{
  visibility: hidden;
  position: absolute;
  top: 42px; /* 35px */
  left: 50%;
  text-align: center;
  z-index: 999;
  width: 150px;
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  margin-left: -14px;
  padding: 2px;
  line-height:14px;
  color:#fff;
  background-color: #000;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltipsuperlong:hover,
.tooltip40superlong:hover
{
border: 0; /* IE6 fix */
}

.tooltipsuperlong:hover span,
.tooltip40superlong:hover span
{
/*visibility: visible; */
transition-delay:1s; visibility: visible;
}

.tooltipsuperlong span:before,
.tooltipsuperlong span:after,
.tooltip40superlong span:before,
.tooltip40superlong span:after
{
content: "";
position: absolute;
z-index: 1000;
top: -7px;
left: 10%;  /* change tooltipsuperlong span margin-left & width if you change this */
margin-left: -8px;
border-bottom: 8px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0;
border-top-color: #000;
}


/**************** for savesite iframe ****************/
.tooltip40showpassword,
.tooltipshowpassword
{
position: relative;
/*background: #eaeaea;*/
display: inline-block;
text-decoration: none;
/*color: #222;*/
outline: none;
}

.tooltip40showpassword span,
.tooltipshowpassword span
{
visibility: hidden;
position: absolute;
top:32px;
text-align: center;
z-index: 999;
width: 150px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif; font-weight:bold;
margin-left: -110px;
padding: 2px;
/* border: 1px solid #000;  */
/*opacity: .9; */
line-height:14px;
color:#fff;
background-color: #000;
/*
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
*/
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip40showpassword:hover,
.tooltipshowpassword:hover
{
border: 0; /* IE6 fix */
}

.tooltip40showpassword:hover span,
.tooltipshowpassword:hover span
{
transition-delay:1s; visibility: visible;
}

.tooltip40showpassword span:after,
.tooltipshowpassword span:after
{
content: "";
position: absolute;
z-index: 1000;
top: -7px;
left: 78%; /* change tooltipshowpassword span margin-left & width if you change this */
margin-left: -10px;
border-bottom: 8px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0;
}

.tooltip40showpassword span:after,
.tooltipshowpassword span:after
{
border-top-color: #000;
}

/**************** for generate and save-a-site iframe ****************/
/* tooltipgen1 : show above and to the left-side of parent
** tooltipgen2 : show below and to the right-side of parent
** tooltipgen3: show to the right 
*/
.tooltipgen1, .tooltipgen2, .tooltipgen3,
.tooltipgen1_40, .tooltipgen2_40, .tooltipgen3_40
{
position: relative;
/*background: #eaeaea;*/
display: inline-block;
text-decoration: none;
color: #000;
outline: none;
}

.tooltipgen1 span, .tooltipgen1 html\:span,
.tooltipgen1_40 span, .tooltipgen1_40 html\:span
{
visibility: hidden;
position: absolute;
bottom: 22px;
text-align: center;
z-index: 999;
width: 200px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif; font-weight:bold;
margin-left: 0px;  /* was -175px when the tooltip span follows the label.
                   ** life is simpler when moving the tooltip span before it.
                   */
padding: 2px;
/* border: 1px solid #000; */
/*opacity: .9; */
line-height:14px;
color:#fff;
background-color: #000;
/*
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
*/
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltipgen1:hover,
.tooltipgen1_40:hover
{
border: 0; /* IE6 fix */
}

.tooltipgen1:hover span,
.tooltipgen1:hover html\:span,
.tooltipgen1_40:hover span,
.tooltipgen1_40:hover html\:span
{
transition-delay:1s; visibility: visible;
}

.tooltipgen1 span:after,
.tooltipgen1 html\:span:after,
.tooltipgen1_40 span:after,
.tooltipgen1_40 html\:span:after 
{
content: "";
position: absolute;
z-index: 1000;
bottom: -8px;
left: 15%; /* change tooltipgen1 span margin-left & width if you change this */
margin-left: -8px;
border-top: 8px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

/* for delayed hover per Levi.  2sec appears better than 1sec to me */
/* stackoverflow.com/questions/8566090/delay-hover-in-css3 */
.tooltipgen2:hover span,
.tooltipgen2:hover html\:span,
.tooltipgen2_40:hover span,
.tooltipgen2_40:hover html\:span
{
transition-delay:2s; visibility: visible;
}

.tooltipgen2 span:after,
.tooltipgen2 html\:span:after,
.tooltipgen2_40 span:after,
.tooltipgen2_40 html\:span:after
{
content: "";
position: absolute;
z-index: 1000;
top: -7px;
left: 50%; /* change tooltipgen2 span margin-left & width if you change this */
margin-left: -8px;
border-bottom: 8px solid #000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0;
}

.tooltipgen2 span,
.tooltipgen2 html\:span,
.tooltipgen2_40 span,
.tooltipgen2_40 html\:span
{
visibility: hidden;
position: absolute;
top:38px;
text-align: center;
z-index: 999;
width: 200px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif; font-weight:bold;
margin-left: 80px;
padding: 2px;
/* border: 1px solid #000; */
/*opacity: .9; */
line-height:14px;
color:#fff;
background-color: #000;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltipgen3 span,
.tooltipgen3 html\:span,
.tooltipgen3_40 span,
.tooltipgen3_40 html\:span
{
visibility: hidden;
position: absolute;
text-align: center;
z-index: 999;
width: 200px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif; font-weight:bold;
margin-left: 111px;
padding: 2px;
line-height:14px;
color:#fff;
background-color: #000;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltipgen3:hover,
.tooltipgen3_40:hover
{
border: 0; /* IE6 fix */
}

.tooltipgen3 span:after,
.tooltipgen3 html\:span:after,
.tooltipgen3_40 span:after,
.tooltipgen3_40 html\:span:after
{
content: "";
position: absolute;
z-index: 1000;
left: -7px;
top: 1px;
border-right: 8px solid #000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 0;
}

.tooltipgen3:hover span,
.tooltipgen3:hover html\:span,
.tooltipgen3_40:hover span,
.tooltipgen3_40:hover html\:span
{
transition-delay:1s; visibility: visible;
}

/****** end tooltip rules ********/



.moreMsg {
  margin-left:8px;
  margin-top:8px;
  margin-bottom:0px;
}

.moreMsg p {
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  font-size:15px;
  color:#000;
  margin:2px;
  text-align:left;
}

.cc{
  padding-left: 6px;
}

/**** rules for the superbox  ******/
#superbox_savesite_txt {
  height:30px;
  line-height:30px;
  text-align:center;
  position:absolute;
  width: 320px;
}
#superbox_nav {
  height:30px;
  border: 1px solid #c3c3c3;  /* final */  
}
#superbox_savesite_txt_span {
  padding-left:5px;
  color: #000;
  font-size:15px;
  font-family: Arial, Helvetica sans-serif; font-weight:bold;   /* chelsea pointed out font discrepancy */
}
/* for the superbox, intended to be highlight effect */
/* now, unusued.
.shade
{
background-color: #d0d0d0;
color:#404040;
}
*/
#superbox {
  width:100%;
  border-bottom: 1px solid #c3c3c3 ;  /* final */
}
#superbox_arrow_icon {
/* try this: next 2 rules replaces arrowimg_mouseover()/arrowimg_mouseblur().
** and using a standardized 16x16 image than the last photoshopped 10x24 one */
  /* opacity: 0.5;
  /* background-color: #d21100; /* placeholder red */
  background-color: #e0322d; /*from levi */

/* padding with no border, this is ok
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
*/

/* padding with 1px border as spec'd by 29th drive */
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 4px;

  padding-right: 0px;
  width:10px;
  /* not sufficient... border-color:#af1510; /*final */
  border-left: 0px;
  border-right: 1px solid #af1510;
  border-bottom: 1px solid #af1510;
  border-top: 1px solid #af1510;
  cursor: pointer;
}
#superbox_arrow_icon:hover {
  opacity: 1;
  /*background-color: #d0d0d0; grey */
  /* background-color: #d21100; /* placeholder red */
  background-color: #d12a25; /*final */
}
#superbox_active_icon {
  /* padding: 5px;  /* for the 20x20 font, and no border */
  padding: 4px;  /* for the 20x20 font and 1px borders */
  background-color: #e0322d; /*from levi */
  cursor: pointer;
  /* not sufficient... border-color:#af1510; /*final */
  border-right: 0px;
  border-left: 1px solid #af1510;
  border-bottom: 1px solid #af1510;
  border-top: 1px solid #af1510;
}
#superbox_active_icon:hover {
  background-color: #d12a25; /*final */
}
#superbox_emptymsg_txt_span {
  text-align:left;
  /*font-style:italic;  if g_short_empty_msg, this looks out of place*/
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  position:absolute;
  top:0px;
  left:33px;
}

/*** end rules for superbox *****/

.savesitediv {
  padding-left:10px;
  padding-right:10px;
}

/****************  styling for the password generate tab ********/ 

#normalwidth{width:90%;}

/* styling for the generate_popupaction tab */
#lpgenerate{
  padding:5px;
  background-color:#e6e6e6;  /* final */
  color:#000;
}
#lpgenerate label{
  background-color:#e6e6e6;  /* final */
  color:#000;
  font-weight:normal;
}
#lpgenerate{
  width: 100%;
}
#generate{
  overflow: hidden;
}
#advancedoptions {  /* 250px width is ok in English. compute it dynamically to support other languages */
  text-align:left;
  background:#e6e6e6; /* final */
  padding:5px;
  border:1px solid #c3c3c3; /* final */
  margin-top:5px;
}
#advancedoptions div{
  padding: 2px;
}

/* next class is for label/descriptive text in the generate password subtab only */
.gendivtab { 
  overflow:auto;
  padding-left:10px;
  padding-right:10px;
  margin:0px;
  background-color:#e6e6e6;  /* final */
  color:#000;
}
.gendivtext { font-size:12px; 
  background-color:#e6e6e6;  /* final */
  color:#000;
  font-family: Arial, Helvetica, sans-serif; font-weight:normal;
  z-index:10000;
}
#maxpwlen{
  color:#777777!important;
  margin-left:10px!important;
  display:inline-block!important;
}
.tipboldlabel, a.tipboldlabel, html\:a.tipboldlabel {
  color: #000 !important;
  text-decoration: none;
/* need this line due to conflict with IE internal stylesheet */
  font-weight:bold !important; 
  font-size:12px;  /* same as for .gendivtext */
  padding-top:4px;  /* spacing above the major text items */
}
.genselect {
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  font-size:12px; 
  background-color:#e6e6e6;  /* final */
  color:#000;
  border-radius:0px;  /* this is not being honored */
  width:100px;
}
/* can't figure out how to align this directly under the password
** input field and to the left of the generate button w/o this
** next rule.
*/
#ghettocontainer {
  margin-top:-4px;
}
#password{
  /* width: 300px; similar to .saveinput but width is dynamically computed on this element*/
  height: 30px;
  height:34px;
  background-color:#fff !important;
  color:#000 !important;
}
/****************  end styling for the password generate tab ********/ 

/* turns out, you need the border after all to look right
*/
#password, #group, #name, #p, #u {
  border-top-color:#a4a4a4;
  border-left-color:#c3c3c3;
  border-right-color:#c3c3c3;
  border-bottom-color:#c3c3c3;
}


/************ styling for the delete/confirmation sub-tab ***********/
#lpdelete{
  background-color:#e6e6e6;  /* final */
  color:#000;
  padding-left:10px;
  text-align:left;
  font-size:14px; 
  height:100%;
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
  width:100%;  /* for firefox */
}
#deletename{
  height: 30px;
  /*background-color:#fff !important;   */
  background-color:#eeeeee !important;  /* shade this slightly to indicate to user that this is not editable. */
  color:#000 !important;
  border-top-color:#a4a4a4;
  border-left-color:#c3c3c3;
  border-right-color:#c3c3c3;
  border-bottom-color:#c3c3c3;
  margin-left:10px;
  width:80%;
}
#deleteyes {
  border-radius: 0px;
  color:#fff;                 /* final */
  background-color:#d0322d;   /* final */
  font-weight:bold;
  border-color:#af1510;     /* final */
}
#deleteyes:hover {
  color:#fff;
  background-color:#d12a25;   /* final */
  font-weight:bold;
}
#deleteno {
  border-radius: 0px;
  color:#000;                 /* final */
  background-color:#e6e6e6; /* final */
  font-weight:bold;
  border-color:#c3c3c3;     /* final */
  margin-left:16px; padding:4px 10px;
}
#deleteno:hover {
  color:#000;
  background-color:#dddddd;   /* final */
  font-weight:bold;
}
/*********** end delete/confirmation sub-tab ************/


/* stylized scrolls inside the iframe */
/* these rules are for webkit only.  firefox cannot style the scrollbar.
** turns out, you can only change the colors with IE CSS rules.  
** https://css-tricks.com/custom-scrollbars-in-webkit/
*/

  ::-webkit-scrollbar-track {
    border-radius:0;
  }
  ::-webkit-scrollbar-track-piece {
    border-radius:0;
    background-color:#dddddd;  /* from levi */
  }
  ::-webkit-scrollbar-track:start {
    border: 1px solid #000;
  }
  ::-webkit-scrollbar-track:end {
    border: 1px solid #000;
  }
  ::-webkit-scrollbar {
    width:8px;    /* for vertical scrollbar */
    height:8px;   /* for horizontal scrollbar */
    border-radius:0;
  }
  ::-webkit-scrollbar-thumb {
    border-radius:0;
    background-color: #4c4c4c;  /* use this from levi */
  }

/************** styling for the new never/disable tab *************/
#lptabpopupnever{
  background-color:#e6e6e6;  /* final */
  color:#000;
/*  padding-left:10px; */
  text-align:left;
  font-size:14px; 
  height:100%;
  width:100%;  /* firefox needs this */
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
}
/**************** end rules for the never/disable tab **************/


.headtext { 
  font-size:14px; 
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;  /* vs font-weight:normal in .divtext, .bodytext */
  overflow:auto;
  margin-left:10px;
  margin-right:10px;
  margin-top:5px;
  margin-bottom:5px;
  padding:0;
  text-align:left;
}
.bodytext { 
  font-size:14px; 
  font-family: Arial, Helvetica, sans-serif; font-weight:normal;
  overflow:auto;
  margin-left:10px;
  margin-right:10px;
  margin-top:5px;
  margin-bottom:5px;
  padding:0;
  text-align:left;
}


/************* styling for the new askReplace tab ***************/

/* copy from #lptabpopupnever, see how it looks */
#lpaskreplace{
  background-color:#e6e6e6;  /* final */
  color:#000;
  padding-left:10px;
  text-align:left;
  font-size:14px; 
  height:100%;
  width:100%;  /* firefox needs this */
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
}
#replacechange {
  border-radius: 0px;
  color:#fff;                 /* final */
  background-color:#d0322d;   /* final */
  font-weight:bold;
  font-size:11px;
  border-color:#af1510;       /* final */
  margin-top:2px;
  margin-bottom:2px;
}
#replaceadd {
  border-radius: 0px;
  color:#000;                 /* final */
  background-color:#e6e6e6;   /* final */
  font-weight:bold;
  font-size:11px;
  border-color:#c3c3c3;     /* final */
  margin-top:2px;
  margin-bottom:2px;
  margin-left:16px; padding:4px 10px;
}
#replacechange:hover {
  color:#fff;                 /* final */
  background-color:#d12a25;   /* final */
  font-weight:bold;
}
#replaceadd:hover {
  color:#000;                 /* final */
  background-color:#dddddd;   /* final */
  font-weight:bold;
}
#askReplacePasswordDiv{
  width:100%;  /* firefox needs this */
  background-color:#e6e6e6;  /* final */
}
#moreDiv{
  width:100%;  /* firefox needs this */
}
/********** end of styling for the new askReplace tab **********/

.subtext{
  margin:0px 0px 3px 0px;
  padding-left:21px;
  font-size: 11px;
  color: gray;
}

#transdiv {
  background-color:transparent;
  height:60px;
  width:100%;
  /* next rules are required for IE */
  border:0;
  opacity:0;
  filter:alpha(opacity=0);
}
/* these contain styles from the original iframe */
#contentdiv {
  border-style:solid;
  border-color:#4c4c4c; 
  border-width:2px;   /* 1px loses corners? */
  border-radius:4px 4px; 
  -moz-border-radius: 4px; 
  -webkit-border-radius: 4px; 
  box-shadow: 1px rgba(200, 200, 200, 0.5); 
  -webkit-box-shadow: 1px 1px rgba(200, 200, 200, 0.5); 
  -moz-box-shadow: 1px 1px rgba(200, 200, 200, 0.5);
  /* these are from the old body style */
  background: #fff !important;
  font-weight: bold;
  color: #000 !important;
  cursor:default;
  text-align:left;
  font-size:14px;
  overflow:hidden;
}

#main {  /* firefox specific */
  border-style:solid;
  border-color:#4c4c4c; 
  border-width:2px;   /* 1px loses corners? */
  border-radius:4px 4px; 
  -moz-border-radius: 4px; 
  -webkit-border-radius: 4px; 
  box-shadow: 1px rgba(200, 200, 200, 0.5); 
  -webkit-box-shadow: 1px 1px rgba(200, 200, 200, 0.5); 
  -moz-box-shadow: 1px 1px rgba(200, 200, 200, 0.5);
  /* these are from the old body style */
  background: #fff !important;
  font-weight: bold;
  color: #000 !important;
  cursor:default;
  text-align:left;
  font-size:14px;
  /* overflow:hidden; breaks firefox */
}


body {
  margin: 0px;    /* to defuse Browser supplied style sheet */
  overflow: hidden;
  /* next rules are required for IE */
  background-color:transparent;
  color:#000;
  background-image:none;
}
#masterdiv {
  margin: 0px;
  overflow:hidden;
}
/* I can't remember if this next rule is still needed or not.
** it was needed at one point in time for firefox */
/*
#moreDiv{
  width:100%; 
}
*/

/********** begin of styling for askSavePasswordConfirm tab **********/

#lpasksavepwconfirm {
  background-color:#e6e6e6;  /* final */
  color:#000;
  padding-left:10px;
  text-align:left;
  font-size:14px; 
  height:100%;
  width:100%;  /* firefox needs this */
  font-family: Arial, Helvetica, sans-serif; font-weight:bold;
}
#confirmgen {
  border-radius: 0px;
  color:#000;                 /* final */
  background-color:#e6e6e6;   /* final */
  font-weight:bold;
  font-size:11px;
  border-color:#c3c3c3;     /* final */
  margin-top:2px;
  margin-bottom:2px;
}
#confirmgen:hover {
  color:#000;                 /* final */
  background-color:#dddddd;   /* final */
  font-weight:bold;
}
#askSavePasswordConfirmDiv{
  width:100%;  /* firefox needs this */
  background-color:#e6e6e6;  /* final */
}
#askSavePasswordConfirmationDiv {
  height:100%;  /* firefox needs this */
  width:100%;  /* firefox needs this */
  background-color:#e6e6e6;  /* final */
}
/********** end of styling for askSavePasswordConfirm tab **********/

/* for dynamically creating an html:hr xul element ; it
** will not inherit these from html.css if you create and append,
** but they do if assign with innerHTML it seems.  so override
** here.
*/
html\:hr {
  display: block;
  height: 2px;
  border: 1px inset;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  -moz-box-sizing: border-box;
}

html\:hr[size="1"] {
  border-style: solid none none none;
}
html\:tr {
  display:table-row;
  vertical-align:inherit;
}
html\:td {
 display:table-cell;
 vertical-align:inherit;
 text-align:inherit;
 padding:1px;
}
html\:table {
  display:table;
  border-spacing:2px;
  border-collapse:separate;
  margin-top:0px;
  margin-bottom:0px;
  -moz-box-sizing: border-box;
  text-indent:0;
}
html\:p {
  display:block;
  margin: 1em 0;
}
html\:span {

}


/* needed for firefox for dynamically created elements in xul dialog */
.pigsty {
  /* e.g. firefox */
}
/*
.tablesty {
  display:inline-table;
  border-spacing:2px 2px;
}
.rowsty {
  display:table-row;
}
.cellsty {
  display:table-cell;
  padding:1px;
}
*/
.maintablesty {   /* for main only  */
  display:block;
  border-spacing:0px;
/*  width:100%;  /* wtf */
}

#advbutton {
  vertical-align:middle;
}

.whitespacenowrap {
  white-space:nowrap;
}

.margin0px {
  margin:0px;
}

.margintop15px {
  margin-top:15px;
}

.width30px {
  width:30px;
}

.paddingbottom10pxpaddingtop6px {
  padding-bottom:10px;padding-top:6px;
}

.padding4px10px {
  padding:4px 10px;
}

.paddingtop10px {
  padding-top:10px;
}

.paddingbottom8px {
  padding-bottom:8px;
}

.floatleft {
  float: left;
}

#superbox_savesite_icon {
  float: left; padding: 7px; opacity:0.5; filter:alpha(opacity=50); border:0px;
}

.displaynone {
  display: none;
}

#superbox_sites_icon {
  padding: 5px; opacity:0.8; filter:alpha(opacity=80); border:0px; display: none;
}

#superbox_ff_icon, #superbox_generate_icon, #superbox_never_icon {
  padding: 5px; opacity:0.5; filter:alpha(opacity=50); border:0px; display: none;
}

.marginleft10px {
  margin-left:10px;
}

.paddingright30px {
  padding-right: 30px;
}
.btnlessmarg{
  margin: 10px 0 0 0;
}
.btnnomargshift{
  margin: 0 0 0 -20px;
}

/*from http://stackoverflow.com/questions/2326004/prevent-selection-in-html */
*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}


#lptabpopupzerostate {
  background-color: #e6e6e6;  /* 3.0 background color */
}

.bg40header, .bh40error {
  background-color: #d32d27;
}
/* hover
   background-color: #af0809;
 */
.bg40notify {
  background-color: #2ecc71;
}
.bg40warn {
  background-color: #f39c12;
}
.bg40title,
.bg40dialog {
  background-color: #f2f4f5;
}

.super40lefticon {
  float: left;
  padding: 7px !important; 
  opacity:1; 
  filter:alpha(opacity=100);
  border:0px;
}
.super40trayicon {
  padding: 7px !important; 
  opacity:1; 
  filter:alpha(opacity=100);
  border:0px;
  display:block;
}
.super40righticon {
  float: right; 
  padding: 7px !important; 
  opacity:1; 
  filter:alpha(opacity=100);
  border:0px;
}

/********** begin styling for zerostateDialog tab **********/

.zerobtns {
  width: 275px !important;   /* !important for IE */
  margin-left: 10px;
  margin-top: 0px !important; /* " "   "  "   " " */
  font-size : 14px !important;/* " "   "  "   " " */
  padding: 4px 4px 3px 4px;
}

/* override nbtn:active */
.zerobtns:active {
  padding: 4px 4px 3px 4px;
}

.lastzerobtn {
  margin-bottom: 10px;
}

#lpzerohour {
  min-height: 140px;
  text-align: center;
}

/** redo title bar **/
.super40height {
  height:40px;
}
.super40icon {
  height:40px;
  width:40px;
}
a:visited.super40icon, 
a:focus.super40icon {
  /* likely replace with tooltip styles */
  background: #d32d27 !important;
  outline-style: none;
}
/* IE old box model 12px offset = 10+2*/

.super40icon_icon {
  /*padding:10px; */
  border-color: transparent;
  border-width:2px;
  border-style:solid;
  background-repeat: no-repeat;
  background-position: center center;
  width: 40px;
  height: 40px;
}
.super40icon_icon:focus ,
.super40icon_icon:active {
  /* padding:10px; */
  border-color: #e16c6a;
  outline-color: #e16c6a;
  /* outline-style: none; */
}
.super40icon_icon:hover {
  padding:10px;
  background-color: #af0809;
  border-color: transparent;
}
.floatright {
  float:right;
}
.floatleft {
  float:left;
}
.super40title {
  font-size : 15px;
  font-weight: bold;
  text-align: left;
  font-family: Open Sans,Arial, Helvetica, sans-serif;
  line-height: 40px;
  margin-left: 10px;
}

/* gross hack for IE : image.src, without access to CSS background
 * until res://iframe.dll reaches DOMContentLoaded
 */
.super40icon_icon_ie {
  padding:10px;
  border-color: transparent;
  border-width:2px;
  border-style:solid;
  background-repeat: no-repeat;
  background-position: center center;
}
.super40icon_icon_ie:focus ,
.super40icon_icon_ie:active {
  border-color: #e16c6a;
  outline-color: #e16c6a;
  /* outline-style: none; */
}
.super40icon_icon_ie:hover {
  padding:10px;
  background-color: #af0809;
  border-color: transparent;
}

/*
 * following image specs are one line to facilitate string substitution
 * during build time and suitable for injection into IE iframe
 */

.SB_addico_img { background-image: url( ); }
.SB_addico_active,
.SB_addico_img:hover { background-image: url(); }

.SB_ffico_img { background-image: url(); }

.SB_ffico_active,
.SB_ffico_img:hover { background-image: url(); }

.SB_nevico_img { background-image: url(); }
.SB_nevico_active,
.SB_nevico_img:hover { background-image: url(); }


.SB_closeico_img { background-image: url(); }
/*.SB_closeico_img { background-image: url(); }*/

.SB_genico_img { background-image: url(); }
.SB_genico_active,
.SB_genico_img:hover { background-image: url(); }

.SB_siteico_img { background-image: url(); }
.SB_siteico_active,
.SB_siteico_img:hover { background-image: url(); }

@media screen and (-ms-high-contrast: black-on-white) {
  .SB_addico_active,
  .SB_addico_img:hover { background-image: url( ); }

  .SB_ffico_active,
  .SB_ffico_img:hover { background-image: url(); }

  .SB_nevico_active,
  .SB_nevico_img:hover { background-image: url(); }

  .SB_closeico_img { background-image: url(); }

  .SB_genico_active,
  .SB_genico_img:hover { background-image: url(); }

  .SB_siteico_active,
  .SB_siteico_img:hover { background-image: url(); }
}

.wrench_img { background-image: url(); }

/*
 * http://www.sitepoint.com/css-techniques-for-retina-displays/
 *
 */
@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {

    .SB_addico_img { background-image: url(); 
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }
    .SB_addico_active,
    .SB_addico_img:hover { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }


    .SB_siteico_img { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }
    .SB_siteico_active,
    .SB_siteico_img:hover { background-image: url() ;
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }

    .SB_genico_img { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }

    .SB_genico_active,
    .SB_genico_img:hover { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }


    .SB_closeico_img { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }

    .SB_nevico_img { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }
 
    .SB_nevico_active,
    .SB_nevico_img:hover { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }

    .SB_ffico_img { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }

    .SB_ffico_active,
    .SB_ffico_img:hover { background-image: url();
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }

    .wrench_img { background-image: url(); 
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }


}
